<!--
 * @Author: ZAL 2177624751@qq.com
 * @Date: 2025-02-23 13:45:21
 * @LastEditors: ZAL 2177624751@qq.com
 * @LastEditTime: 2025-03-31 14:26:31
 * @FilePath: \shop_app_vue3\pages\user\components\profile.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 个人信息 -->

<template>
  <view class="profile-container">

    <view class="profile-form">
      <u-cell-group>
        <u-cell title="头像" center :isLink="true" @click="handleUpdateAvatar">
          <u-avatar
            :src="userInfo.avatarUrl || '/static/images/default-avatar.png'"
            size="120"
            shape="circle"
          ></u-avatar>
        </u-cell>

        <u-cell
          title="昵称"
          center
          :isLink="true"
          :value="userInfo.nickname || '设置个性昵称'"
          @click="handleUpdateNickname"
        ></u-cell>

        <u-cell
          title="性别"
          center
          :isLink="true"
          :value="getGenderText(userInfo.gender)"
          @click="show = true"
        ></u-cell>

        <u-cell
          title="手机号"
          center
          :isLink="true"
          :value="formatPhone(userInfo.phone)"
          @click="handleUpdatePhone"
        ></u-cell>

        <u-cell
          title="邮箱"
          center
          :isLink="true"
          :value="userInfo.email || '设置邮箱'"
          @click="handleUpdateEmail"
        ></u-cell>

        <u-cell
          title="地址管理"
          center
          :isLink="true"
          value="管理收货地址"
          url="/pages/user/components/address"
        ></u-cell>
        <u-cell title="隐私政策" center :isLink="true" @click="showPrivacyPolicy"></u-cell>
      </u-cell-group>
    </view>

    <view class="account-section">
      <u-cell-group>
        <u-cell
          title="退出登录"
          center
          :isLink="true"
          @click="handleLogout"
          titleStyle="color: #ff4d4f;"
        ></u-cell>

        <u-cell
          title="注销账号"
          center
          :isLink="true"
          @click="handleDeleteAccount"
          titleStyle="color: #ff4d4f;"
        ></u-cell>
      </u-cell-group>
    </view>

    <!-- 性别选择弹窗 -->
    <u-popup :show="show" mode="bottom" round="20">
      <view class="gender-popup">
        <view class="popup-header">
          <text>选择性别</text>
        </view>
        <view class="popup-content">
          <view
            class="gender-option"
            :class="{ active: selectedGender === 1 }"
            @click="handleSelectGender(1)"
          >
            <u-icon
              name="man"
              size="40"
              :color="selectedGender === 1 ? '#ff8800' : '#666'"
            ></u-icon>
            <text>男</text>
          </view>
          <view
            class="gender-option"
            :class="{ active: selectedGender === 2 }"
            @click="handleSelectGender(2)"
          >
            <u-icon
              name="woman"
              size="40"
              :color="selectedGender === 2 ? '#ff8800' : '#666'"
            ></u-icon>
            <text>女</text>
          </view>
        </view>
        <view class="popup-footer">
          <u-button @click="handleCancel">取消</u-button>
        </view>
      </view>
    </u-popup>

    <!-- 确认弹窗 -->
    <u-modal
      :show="showConfirmModal"
      :content="confirmModalContent"
      showCancelButton
      @confirm="handleConfirmAction"
      @cancel="showConfirmModal = false"
    ></u-modal>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useAuthStore } from '@/store/auth'
import * as loginApi from '@/api/login'

const authStore = useAuthStore()
const show = ref(false)
const selectedGender = ref(null)
const showConfirmModal = ref(false)
const confirmModalContent = ref('')
const confirmAction = ref(null)

const userInfo = computed(() => authStore.userInfo || {})

// 格式化手机号
const formatPhone = (phone) => {
  if (!phone) return '未设置'
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

// 获取性别文本
const getGenderText = (gender) => {
  const genderMap = {
    0: '未设置',
    1: '男',
    2: '女',
  }
  return genderMap[gender] || '未设置'
}

// 头像更新
const handleUpdateAvatar = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: async (res) => {
      try {
        // 这里应该先上传图片到服务器获取URL
        const avatarUrl = res.tempFilePaths[0] // 实际项目中替换为上传后的URL
        await loginApi.updateAvatar(avatarUrl)
        await authStore.updateUserInfo()
        uni.showToast({ title: '头像更新成功', icon: 'success' })
        uni.navigateBack()
      } catch (error) {
        uni.showToast({ title: '头像更新成功', icon: 'success' })
        uni.navigateBack()
      }
    },
  })
}

// 昵称更新
const handleUpdateNickname = () => {
  uni.navigateTo({ url: '/pages/user/components/nickname' })
}

// 手机号更新
const handleUpdatePhone = () => {
  uni.navigateTo({ url: '/pages/user/components/phone' })
}

// 邮箱更新
const handleUpdateEmail = () => {
  uni.navigateTo({ url: '/pages/user/components/email' })
}

// 生日更新
const handleUpdateBirthday = () => {
  uni.navigateTo({ url: '/pages/user/components/birthday' })
}

// 性别选择
const handleSelectGender = async (gender) => {
  try {
    await loginApi.updateGender(gender)
    await authStore.updateUserInfo()
    show.value = false
    uni.showToast({ title: '性别更新成功', icon: 'success' })
    uni.navigateBack()
  } catch (error) {
    uni.showToast({ title: '性别更新成功', icon: 'success' })
    uni.navigateBack()
  }
}

const handleCancel = () => {
  show.value = false
}

// 退出登录
const handleLogout = () => {
  confirmModalContent.value = '确认退出登录吗？'
  confirmAction.value = 'logout'
  showConfirmModal.value = true
}

// 注销账号
const handleDeleteAccount = () => {
  confirmModalContent.value = '确认要注销账号吗？注销后数据将无法恢复！'
  confirmAction.value = 'delete'
  showConfirmModal.value = true
}

// 确认操作
const handleConfirmAction = async () => {
  if (confirmAction.value === 'logout') {
    await authStore.logout()
    uni.reLaunch({ url: '/pages/login/login' })
  } else if (confirmAction.value === 'delete') {
    // 实现账号注销逻辑
    uni.showToast({ title: '账号注销功能开发中', icon: 'none' })
  }
  showConfirmModal.value = false
}

// 隐私政策
const showPrivacyPolicy = () => {
  uni.navigateTo({ url: '/pages/user/components/privacyPolicy' })
}

// 用户协议
const showUserAgreement = () => {
  uni.navigateTo({ url: '/pages/user/components/userAgreement' })
}

onMounted(async () => {
  if (authStore.isLoggedIn) {
    await authStore.updateUserInfo()
  }
})
</script>

<style lang="scss" scoped>
.profile-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: env(safe-area-inset-bottom);

  .profile-header {
    padding: 32rpx;
    background: linear-gradient(135deg, #00b578, #07c160);
    margin-bottom: 20rpx;

    .header-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #fff;
    }
  }

  .profile-form,
  .account-section,
  .other-section {
    margin: 20rpx;
    border-radius: 12rpx;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

    :deep(.u-cell) {
      padding: 24rpx 32rpx;

      &::after {
        border-color: #f0f0f0;
      }
    }

    :deep(.u-cell__title) {
      font-size: 28rpx;
      color: #333;
    }

    :deep(.u-cell__value) {
      font-size: 28rpx;
      color: #666;
    }
  }

  .gender-popup {
    .popup-header {
      padding: 32rpx;
      text-align: center;
      border-bottom: 1px solid #f0f0f0;

      text {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
      }
    }

    .popup-content {
      display: flex;
      padding: 40rpx;

      .gender-option {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20rpx;
        border-radius: 12rpx;
        transition: all 0.3s;

        text {
          margin-top: 20rpx;
          font-size: 28rpx;
          color: #666;
        }

        &.active {
          background-color: rgba(0, 181, 120, 0.1);

          text {
            color: #00b578;
            font-weight: 500;
          }
        }

        &:active {
          transform: scale(0.95);
        }
      }
    }

    .popup-footer {
      padding: 20rpx 32rpx;

      :deep(.u-button) {
        height: 80rpx;
        border-radius: 40rpx;
        font-size: 30rpx;
      }
    }
  }
}
</style>
